<template>
	<view class="container">
		<!-- 分销等级 -->
		<view class="level-section">
			<view class="section-title">分销等级</view>
			<view class="level-list">
				<view 
					class="level-item" 
					v-for="(item, index) in levelList" 
					:key="index"
					:class="{ active: currentLevel === item.value }"
					@tap="switchLevel(item.value)"
				>
					<image :src="item.icon" mode="aspectFit" class="level-icon"></image>
					<text class="level-name">{{item.name}}</text>
					<text class="level-desc">{{item.desc}}</text>
				</view>
			</view>
		</view>
		
		<!-- 佣金比例 -->
		<view class="commission-section">
			<view class="section-title">佣金比例</view>
			<view class="commission-table">
				<view class="table-header">
					<text>分销等级</text>
					<text>一级佣金</text>
					<text>二级佣金</text>
					<text>三级佣金</text>
				</view>
				<view 
					class="table-row" 
					v-for="(item, index) in commissionList" 
					:key="index"
				>
					<text>{{item.level}}</text>
					<text>{{item.level1}}%</text>
					<text>{{item.level2}}%</text>
					<text>{{item.level3}}%</text>
				</view>
			</view>
		</view>
		
		<!-- 升级条件 -->
		<view class="upgrade-section">
			<view class="section-title">升级条件</view>
			<view class="upgrade-list">
				<view 
					class="upgrade-item" 
					v-for="(item, index) in upgradeList" 
					:key="index"
				>
					<view class="upgrade-header">
						<text class="level-name">{{item.level}}</text>
						<text class="status" :class="item.status">{{item.statusText}}</text>
					</view>
					<view class="upgrade-content">
						<view class="condition-item" v-for="(condition, idx) in item.conditions" :key="idx">
							<text class="dot">•</text>
							<text class="condition-text">{{condition}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 分销说明 -->
		<view class="tips-section">
			<view class="section-title">分销说明</view>
			<view class="tips-list">
				<view class="tip-item" v-for="(tip, index) in tipsList" :key="index">
					<text class="dot">•</text>
					<text class="tip-text">{{tip}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

// 当前等级
const currentLevel = ref('bronze')

// 分销等级列表
const levelList = [
	{
		name: '青铜分销商',
		value: 'bronze',
		icon: '/static/images/bronze.png',
		desc: '基础分销商'
	},
	{
		name: '白银分销商',
		value: 'silver',
		icon: '/static/images/silver.png',
		desc: '中级分销商'
	},
	{
		name: '黄金分销商',
		value: 'gold',
		icon: '/static/images/gold.png',
		desc: '高级分销商'
	},
	{
		name: '钻石分销商',
		value: 'diamond',
		icon: '/static/images/diamond.png',
		desc: '顶级分销商'
	}
]

// 佣金比例列表
const commissionList = [
	{
		level: '青铜分销商',
		level1: '10',
		level2: '5',
		level3: '2'
	},
	{
		level: '白银分销商',
		level1: '12',
		level2: '6',
		level3: '3'
	},
	{
		level: '黄金分销商',
		level1: '15',
		level2: '8',
		level3: '4'
	},
	{
		level: '钻石分销商',
		level1: '20',
		level2: '10',
		level3: '5'
	}
]

// 升级条件列表
const upgradeList = [
	{
		level: '白银分销商',
		status: 'locked',
		statusText: '未解锁',
		conditions: [
			'累计佣金达到1000元',
			'团队人数达到10人',
			'月度订单数达到50单'
		]
	},
	{
		level: '黄金分销商',
		status: 'locked',
		statusText: '未解锁',
		conditions: [
			'累计佣金达到5000元',
			'团队人数达到50人',
			'月度订单数达到200单'
		]
	},
	{
		level: '钻石分销商',
		status: 'locked',
		statusText: '未解锁',
		conditions: [
			'累计佣金达到20000元',
			'团队人数达到200人',
			'月度订单数达到1000单'
		]
	}
]

// 分销说明列表
const tipsList = [
	'佣金将在订单完成后自动结算',
	'提现最低金额为100元',
	'提现申请将在1-3个工作日内处理',
	'如有疑问请联系客服'
]

// 切换等级
const switchLevel = (level) => {
	currentLevel.value = level
}
</script>

<style>
.container {
	min-height: 100vh;
	background-color: #F5F5F5;
	padding-bottom: 30rpx;
}

/* 通用标题样式 */
.section-title {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
	margin: 30rpx 20rpx;
}

/* 分销等级样式 */
.level-section {
	background-color: #FFFFFF;
	padding: 20rpx;
}

.level-list {
	display: flex;
	justify-content: space-between;
	padding: 0 20rpx;
}

.level-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx;
	background-color: #F5F5F5;
	border-radius: 10rpx;
	width: 160rpx;
}

.level-item.active {
	background-color: #FFF5F5;
	border: 2rpx solid #D02B29;
}

.level-icon {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 10rpx;
}

.level-name {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.level-desc {
	font-size: 24rpx;
	color: #999;
}

/* 佣金比例样式 */
.commission-section {
	background-color: #FFFFFF;
	margin-top: 20rpx;
	padding: 20rpx;
}

.commission-table {
	padding: 0 20rpx;
}

.table-header {
	display: flex;
	justify-content: space-between;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #EEEEEE;
}

.table-header text {
	flex: 1;
	text-align: center;
	font-size: 28rpx;
	color: #666;
}

.table-row {
	display: flex;
	justify-content: space-between;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #EEEEEE;
}

.table-row text {
	flex: 1;
	text-align: center;
	font-size: 28rpx;
	color: #333;
}

/* 升级条件样式 */
.upgrade-section {
	background-color: #FFFFFF;
	margin-top: 20rpx;
	padding: 20rpx;
}

.upgrade-list {
	padding: 0 20rpx;
}

.upgrade-item {
	background-color: #F5F5F5;
	border-radius: 10rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.upgrade-item:last-child {
	margin-bottom: 0;
}

.upgrade-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.upgrade-header .level-name {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
}

.upgrade-header .status {
	font-size: 24rpx;
	padding: 4rpx 16rpx;
	border-radius: 20rpx;
}

.upgrade-header .status.locked {
	color: #999;
	background-color: #F5F5F5;
}

.upgrade-header .status.unlocked {
	color: #52C41A;
	background-color: #F6FFED;
}

.upgrade-content {
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}

.condition-item {
	display: flex;
	align-items: center;
}

.condition-item .dot {
	font-size: 24rpx;
	color: #999;
	margin-right: 10rpx;
}

.condition-item .condition-text {
	font-size: 24rpx;
	color: #666;
}

/* 分销说明样式 */
.tips-section {
	background-color: #FFFFFF;
	margin-top: 20rpx;
	padding: 20rpx;
}

.tips-list {
	padding: 0 20rpx;
}

.tip-item {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.tip-item:last-child {
	margin-bottom: 0;
}

.tip-item .dot {
	font-size: 24rpx;
	color: #999;
	margin-right: 10rpx;
}

.tip-item .tip-text {
	font-size: 24rpx;
	color: #666;
}
</style> 